<template>
  <view style="background-color:#FCA659;">

    <view class="tn-p-xl tn-flex-center-between">
      <view>
        <view class="tn-text-bold tn-text-lg">付款给商家/个人</view>
        <view class="tn-pt">用户名称</view>
      </view>
      <view class="tn-text-bold tn-text-lg tn-red-dark_text">
        本店消费补贴 20%
      </view>
    </view>

    <view style="border-radius: 16px 16px 0 0" class="tn-p-xl tn-white_bg">
      <view class="tn-pb-xl">金额</view>

      <wd-input v-model="amount"
                type="digit"
                readonly
                inputmode="none"
                placeholder=""
                @click="keyboardShow = true"
                custom-input-class="custom-input">
        <template #prefix>
          <text class="tn-text-4xl tn-gray-dark_text">￥</text>
        </template>
      </wd-input>

      <wd-number-keyboard :visible="keyboardShow"
                          safeAreaInsetBottom
                          :maxlength="10"
                          mode="custom"
                          extra-key="."
                          root-portal
                          close-text="付款"
                          :hideOnClickOutside="false"
                          @delete="keyboardDelete"
                          @input="keyboardInput"
                          @close="paymentHandler">
      </wd-number-keyboard>

    </view>

  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {onUnload} from "@dcloudio/uni-app";

/**
 * 软键盘
 */
const keyboardShow = ref<boolean>(true)
const hideI = setInterval(() => uni.hideKeyboard(), 5) // 禁用系统键盘
onUnload(() => clearInterval(hideI))


/**
 * 支付付款
 */
const amount = ref<string>('')

/**
 * 键盘输入时
 */
function keyboardInput(e: string) {
  let ol = amount.value
  if (ol.indexOf('.') != -1 && ol.length - ol.indexOf('.') >= 2)
    return;
  if (ol[ol.length - 1] != '.')
    return amount.value += e
  if (ol.length == 0 && e == '.')
    return amount.value = '0.'
  let nl = Number(amount.value + e)
  if (ol.length + 1 != nl.toString().length) return;
  amount.value += e
}

/**
 * 键盘删除时
 */
function keyboardDelete() {
  if (amount.value.length == 0) return
  amount.value = amount.value.slice(0, amount.value.length - 1)
}

function paymentHandler() {
  wx.requestPayment({
    timeStamp: "1758250217",  //时间戳
    nonceStr: "bdd30b848d2e456eae72e917b6d2b261",   //随机字符串
    package: "prepay_id=wx19105017893105b8b66565c720054d0001",    //prepay_id
    signType: "RSA",   //签名算法MD5
    paySign: "IKIjEZ+m7ufpBrywy0wJvjcmna75OP1ze8zby4KkRirmE9vrKDlUbX0reqDI6DyP7Ra/2tGFroUGyb0Dghq6VZY76zoGc01Je5Sihlo6DKcNnBe9CTVZWvb5KQtow93YT8ql4x1KUTgnANBa4EIXa55kaRpVGUolGUh0ok4TOVuLdDb4dPGHVIjdcmlLqT4EfnR7U9kxAOkEW6GH1Sf93q4rBY2n565kCK353UuLkEh0GL0DJZkgc1ULaGZl3hFTLg1mlIpgwM4gVhcJpyxoL3Qh6hjMmBOojk8vybhOe4LDCWXcZJRrvGkxXRvZMUqaRRXDuQ9K0IfzFsNZRSOihA==",    //签名
  })
}

async function pay() {
  await uni.requestPayment({
    orderInfo: {
      "appid": "wx969f2ef2dfa50010",
      "timestamp": "1758250217",
      "noncestr": "bdd30b848d2e456eae72e917b6d2b261",
      "package": "prepay_id=wx19105017893105b8b66565c720054d0001",
      "signtype": "RSA",
      "sign": "IKIjEZ+m7ufpBrywy0wJvjcmna75OP1ze8zby4KkRirmE9vrKDlUbX0reqDI6DyP7Ra/2tGFroUGyb0Dghq6VZY76zoGc01Je5Sihlo6DKcNnBe9CTVZWvb5KQtow93YT8ql4x1KUTgnANBa4EIXa55kaRpVGUolGUh0ok4TOVuLdDb4dPGHVIjdcmlLqT4EfnR7U9kxAOkEW6GH1Sf93q4rBY2n565kCK353UuLkEh0GL0DJZkgc1ULaGZl3hFTLg1mlIpgwM4gVhcJpyxoL3Qh6hjMmBOojk8vybhOe4LDCWXcZJRrvGkxXRvZMUqaRRXDuQ9K0IfzFsNZRSOihA=="
    },
    provider: 'wxpay'
  })
}
</script>

<style>
.custom-input {
  height: 100px !important;
  font-size: 42px !important;
  font-weight: bold !important;
}
</style>
